<!--
 * @Author: gyc
 * @Date: 2020-05-26 10:09:46
 * @LastEditTime: 2020-08-26 09:01:00
 * @Description: Nuxt测试版
--> 
<template>
  <div class="write-edit">
    <div class="edit-msg">
      <span v-if="Tid">ID:{{Tid}}</span>
      <span>标题:</span>
      <input type="text" v-model="title" style="margin-right:10px" />
      <button @click="showArtList" style="margin-right:10px" v-if="!!!this.$route.params.id">文章列表</button>
      <button @click="resetArticle" style="margin-right:10px" v-if="!!!this.$route.params.id">重置</button>
      <Radio v-model="onlyme">公开</Radio>
    </div>
    <client-only v-if="true">
      <!--marked.js 解析 -->
      <!--   <mavon-editor
        v-model="value"
        class="mavon-editor"
        @save="saveMavon"
        placeholder="输入标题后可开始编辑！"
        :editable="true"
        :toolbars="toolbars"
        :subfield="false"
        :boxShadow="false"
      />-->
      <div
        class="quill-editor"
        :content="content"
        v-model="value2"
        v-quill:myQuillEditor="editorOption"
        @blur="onEditorBlur()"
      ></div>
    </client-only>
    <div class="article-ctl">
      <sao-button :type="2" msg="保存" @confirm="saveMavon" color="black"></sao-button>
    </div>
    <transition name="list">
      <div class="article-list" v-if="showList">
        <div class="list-box">
          <ul>
            <li v-for="v,i in shareList" :key="i" @click="getArt(v.id)">{{i+1}}.{{v.title}}</li>
          </ul>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import Mask from "@/components/mask/mask";
import saoButton from "@/components/button/button_sao";
export default {
  name: "writeArt",
  layout: "userPage",
  data() {
    return {
      value: "",
      value2: "",
      content: "",
      toolbars: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        strikethrough: true, // 中划线
        mark: true, // 标记
        superscript: false, // 上角标
        subscript: false, // 下角标
        quote: true, // 引用
        ol: false, // 有序列表
        ul: false, // 无序列表
        link: true, // 链接
        imagelink: false, // 图片链接
        code: false, // code
        table: false, // 表格
        fullscreen: false, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        htmlcode: true, // 展示html源码
        help: true, // 帮助
        /* 1.3.5 */
        undo: true, // 上一步
        redo: true, // 下一步
        trash: true, // 清空
        save: true, // 保存（触发events中的save事件）
        /* 1.4.2 */
        navigation: true, // 导航目录
        /* 2.1.8 */
        alignleft: false, // 左对齐
        aligncenter: false, // 居中
        alignright: false, // 右对齐
        /* 2.2.1 */
        subfield: true, // 单双栏模式
        preview: true, // 预览
      },
      editorOption: {
        modules: {
          history: {
            delay: 1000,
            maxStack: 50,
            userOnly: false,
          },
          toolbar: [
            ["bold", "italic", "underline", "strike"],
            ["blockquote", "code-block"],
            [
              {
                header: 1,
              },
              {
                header: 2,
              },
            ],
            [
              {
                list: "ordered",
              },
              {
                list: "bullet",
              },
            ],
            [
              {
                script: "sub",
              },
              {
                script: "super",
              },
            ],
            [
              {
                indent: "-1",
              },
              {
                indent: "+1",
              },
            ],
            [
              {
                direction: "rtl",
              },
            ],
            [
              {
                size: ["small", false, "large", "huge"],
              },
            ],
            [
              {
                header: [1, 2, 3, 4, 5, 6, false],
              },
            ],
            [
              {
                font: [],
              },
            ],
            [
              {
                color: [],
              },
              {
                background: [],
              },
            ],
            [
              {
                align: [],
              },
            ],
            ["clean"],
            ["link", "", ""],
          ],
          // imageDrop: true,
          // imageResize: {
          //   displayStyles: {
          //     backgroundColor: "black",
          //     border: "none",
          //     color: "white",
          //   },
          //   modules: ["Resize", "DisplaySize", "Toolbar"],
          // },
        },
      },
      msg:
        "<p>啊实打实大大声道按<br />阿萨德as阿萨德阿萨德<br />d阿萨德as</p><p>从市发改委发送到<br />撒大大<br />大是大非人个人<br />官方dfgd<br />郭德纲工单工单</p>",
      title: "",
      Tid: "",
      showList: false,
      page: 1,
      shareList: [],
      whiteLen: 0,
      onlyme: "",
    };
  },
  beforeMount() {
    this.getArtList();
    const artId = this.$route.params.id;
    // this.Tid = artId;
    this.getArt(artId);
  },
  mounted() {},
  methods: {
    //保存文章内容
    saveMavon(value, render) {
      console.log("this is render" + render);
      console.log("this is value" + value);
      if (this.title !== "") {
        this.$axios
          .post("/api/art/createArt", {
            userId: 16,
            Tid: this.Tid,
            title: this.title,
            articleData: this.value2,
          })
          .then((res) => {
            console.log(res.data);
            if (res.data.data.mod === 1) {
              this.Tid = res.data.data.id;
              this.$Message.success("创建文章成功！");
            } else {
              console.log(res.data);
              this.$Message.success("更新成功！");
            }
          });
      } else {
        this.$Message.info("内容不能为空！");
      }
    },
    //输入框失去焦点
    onEditorBlur(e) {
      console.log(this.value2);
    },
    //获取我的文章列表
    getArtList() {
      this.$axios
        .get("/api/art/findMyArticle", {
          params: {
            userid: 16,
            page: this.page,
          },
        })
        .then((res) => {
          console.log(res.data.data);
          this.shareList = res.data.data;
          this.whiteLen = 6 - this.shareList.length;
          console.log(this.whiteLen);
        });
    },
    //显示我的文章列表
    showArtList() {
      if (this.showList === false) {
        this.showList = true;
        this.getArtList();
      } else {
        this.showList = false;
      }
    },
    //获取文章内容
    getArt(e) {
      this.$axios
        .get("/api/art/findArt", {
          params: {
            id: e,
          },
        })
        .then((res) => {
          if (res.data.data) {
            this.value2 = res.data.data.articleData;
            this.Tid = res.data.data.id;
            this.title = res.data.data.title;
            this.showList = false;
            console.log(res.data.data);
          }
        });
    },
    //重置文章内容
    resetArticle() {
      (this.Tid = ""), (this.value2 = ""), (this.title = "");
    },
  },
  components: {
    "ms-mask": Mask,
    "sao-button": saoButton,
  },
};
</script>

<style lang="scss" scoped>
input {
  width: 200px;
  outline: none;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 1px solid #aaa;
  text-align: center;
  margin-left: 5px;

  &:focus {
    border-bottom: 1px solid black;
  }

  &:focus label {
    font-size: 24px;
  }
}

button {
  padding-left: 10px;
  padding-right: 10px;
  outline: none;
  border: 0;
  cursor: pointer;
  background-color: $gcolor;
  color: white;
}

.write-edit {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 10px;
  background-color: white;
  overflow: auto;

  &::-webkit-scrollbar {
    display: none;
  }

  .write-edit-breadcrumb {
    width: 100%;
    padding-bottom: 10px;
    padding-top: 10px;
    background-color: white;
    border-bottom: 1px solid #eee;
  }

  .edit-msg {
    width: 100%;
    background-color: white;
    padding-bottom: 20px;
    letter-spacing: 2px;
    padding-top: 10px;
  }

  .article-show {
    width: 100%;
  }

  .mavon-editor {
    width: 100%;
    height: 100%;
    z-index: 900;
  }

  .quill-editor {
    position: relative;
    width: 100%;
    z-index: 900;
    height: 100%;
  }

  .article-ctl {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    height: 80px;
    padding-top: 10px;

    button {
      height: 40px;
      margin-left: 10px;
      letter-spacing: 2px;
      padding-right: 20px;
      padding-left: 20px;
    }
  }
}

.article-list {
  position: fixed;
  height: 100vh;
  width: 204px;
  left: 0;
  bottom: 0;
  z-index: 999;

  // animation: showList 0.4s ease-in-out;
  // animation-fill-mode: forwards;
  .list-box {
    width: 100%;
    height: 100%;
    background-color: white;
    box-shadow: -0px 0px 10px #ccc;

    ul {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
      padding-top: 55px;
      padding-bottom: 20px;
      align-items: center;
      padding-right: 10px;
      padding-left: 10px;

      li {
        display: inline-block;
        width: 100%;
        list-style: none;
        height: 40px;
        line-height: 40px;
        padding-right: 10px;
        padding-left: 10px;
        cursor: pointer;
        background-color: #eee;
        overflow: hidden;
        color: black;
        margin-bottom: 10px;

        &:hover {
          color: white;
          background-color: $gcolor;
        }
      }

      .list-box-ctl {
        cursor: pointer;
      }
    }
  }
}

.list-enter-active,
.list-leave-active {
  transition: all 0.4s ease-in-out;
}

.list-enter,
.list-leave-to

/* .fade-leave-active below version 2.1.8 */ {
  left: -204px;
}

@keyframes showList {
  0% {
    left: -204px;
  }

  100% {
    left: 0;
  }
}
</style>
